{% extends "basic.html" %}
{% block head %}
    <link rel="stylesheet" href="{{ url_for('static',filename='css/chat.css') }}">
    <script src="{{ url_for('static',filename='js/chat.js') }}"></script>
{% endblock %}
{% block title %}
    校园社区网
{% endblock %}

{% block container %}
    <div class="own-title">
        <p>论坛/聊天室 注：查看最新消息请<a href="{{ url_for('qa.chat') }}">刷新</a></p>
        <a href="{{ url_for('qa.index') }}">返回首页</a>
    </div>
    <div class="chat-container" id="container" onload="end()">
        {% for chat in chats %}
            <div class="time">{{ chat.join_time }}</div>
            {% if user.username == chat.author.username %}
                <div class="message sent">
                    <span class="umessage">{{ chat.content }}</span>
                    <div class="name-container">
                        <div class="name">{{ chat.author.username }}</div>
                    </div>
                </div>
            {% else %}
                <div class="message received">
                    <span class="umessage">{{ chat.content }}</span>
                    <div class="name-container">
                        <div class="name">{{ chat.author.username }}</div>
                    </div>
                </div>
            {% endif %}
        {% endfor %}
        <div class="message sent" id="end"></div>
    </div>
    <form id="message-form" method="post" enctype="multipart/form-data">
        <div class="input-container" id="input-container">
            <input autocomplete="off" type="text" name="content" placeholder="发你所想...">
            <button class="sendbutton" type="submit" name="send">发送</button>
        </div>
    </form>
{% endblock %}